<template>
	<view class="container">
		<view class="mobile" v-if="!pc">
			<image :src="wapBanner" mode="widthFix" class="banner"></image>
		</view>
		<view class="pc" v-else>
			<image :src="pcBanner" mode="widthFix" class="banner"></image>
			<view class="contents">
				<view class="main">
					<view class="froms">
						<view class="froms-item">
							<view class="l">
								* 请选择与建议内容相关的管辖地领导
							</view>
							<view class="v ld">
								<select class="select">
									<option value="0">请选择</option>
									<option value="0">请选择</option>
									<option value="0">请选择</option>
								</select>
								<select class="select">
									<option value="0">请选择</option>
								</select>
							</view>
						</view>
						
						
						<view class="froms-item">
							<view class="l">
								* 请输入标题
							</view>
							<view class="v ld">
								 <input placeholder="请输入标题">
							</view>
						</view>
						
						
						
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pcBanner: 'https://video.mala.cn/data/User/demo/home/wenzheng/20240322173747.jpg',
				wapBanner: 'https://video.mala.cn/data/User/demo/home/wenzheng/20240322173536.jpg',
				pc: false,
			}
		},
		mounted() {
			if (this._isMobile()) {
				this.pc = false;
			} else {
				this.pc = true
			}

		},
		methods: {

			_isMobile() {
				let flag = navigator.userAgent.match(
					/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
				);
				return flag;
			},
		}
	}
</script>

<style lang="less" scoped>
	.container {
		font-size: 14px;
		line-height: 24px;

		.banner {
			width: 100%;
			margin: 0;
			padding: 0;
			display: flex;
		}

		.pc {

			.contents {
				margin: 0;
				padding: 0;
				background: linear-gradient(90deg, #ee312a 1%, #b71311 29%, #ee362a 245%);

				.main {
					width: 980px;
					margin: 0 auto;

					.froms {
						padding: 60px 0;
						font-size: 20px;
						color: #fff;
					}
				}
			}

		}
	}

	.ld {
		display: flex;
		justify-content: space-between;

		.select {

			border-color: #b1a1a1;
			width: calc(50% - 2px);
			color: #ac6c62;
			padding: 10px;
			font-size: 18px;
			padding-left:30px;

			&:first-child {
				border-top-left-radius: 30px;
				border-bottom-left-radius: 30px;
			}

			&:last-child {
				border-top-right-radius: 30px;
				border-bottom-right-radius: 30px;
			}

		}

		select option {
			background-color: #fff;
			color:#999;
			padding:5px 0;
		}
	}
	.froms-item{
		margin-top:40px;
		.v{
			margin-top:15px;
		}
		input{
			border-radius: 30px;
			background-color: #fff;
			padding: 10px;
			font-size: 18px;
			width:100%;
			padding-left:30px;
		}
	}
</style>